<template>
  <div class="detailWrapper">
    <el-form
      :inline="true"
      ref="headForm"
      :model="headFormData"
      class="search-form"
      style="display: flex; justify-content: space-between"
    >
      <div>
        <el-form-item
          :label="tabMenu[isActive - 1].name + `名称`"
          class="form-input"
        >
          <el-input v-model="headFormData.search"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="onSubmit(1)"
            >查询</el-button
          >
        </el-form-item>
      </div>
      <el-form-item style="text-align: right">
        <el-button size="small" @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>

    <div class="server-table">
      <div class="table-title">
        <span></span>
        <div>
          <!-- 大模型或算法抽取 -->
          <template v-if="['1', '2'].includes($route.query.type)">
            <el-button
              v-if="!isConfirmed"
              type="primary"
              size="small"
              @click="openConfirmDialog"
              >确认</el-button
            >
            <el-button
              v-if="!isAll"
              type="primary"
              size="small"
              @click="goExtractProofread"
              >{{ isConfirmed ? '标注模式' : '校核' }}</el-button
            >
          </template>

          <!-- 结构化抽取任务可以查看配置 -->
          <el-button
            v-if="$route.query.type === '4'"
            type="primary"
            size="small"
            @click="showStructConfig"
          >
            抽取配置
          </el-button>
        </div>
      </div>
      <div class="tabs">
        <div>
          <ul class="tabWrapper">
            <li
              v-for="(item, index) in tabMenu"
              :key="index"
              :class="{
                [item.comp]: item.num,
                active: isActive == item.num ? true : false,
              }"
              @click="clickTab(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="tabBody" v-loading="tabLoading">
          <div v-if="isActive === '1'">
            <el-table :data="entityList" class="km-table" ref="multipleTable">
              <el-table-column
                type="index"
                width="50"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="entityName"
                label="实体名称"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="entityTypeName"
                label="所属类别"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="confidence"
                label="置信度（%）"
                align="center"
                show-overflow-tooltip
              ></el-table-column>

              <!-- <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="200"
              >
                <template slot-scope>
                  <el-link
                    :underline="false"
                    type="primary"
                    class="ontology-edit"
                    @click.native.prevent="goExtractProofread"
                    >删除</el-link
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <el-pagination
              class="km-pagination"
              background
              :small="true"
              layout="total, prev, pager, next,sizes, jumper"
              :total="entityTotal"
              :hide-on-single-page="!entityTotal"
              :page-size.sync="headFormData.page_size"
              :pager-count="7"
              :page-sizes="[10, 20, 30]"
              :current-page="headFormData.page_index"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
          <div v-else-if="isActive === '2'">
            <el-table :data="propertyList" class="km-table">
              <el-table-column
                type="index"
                width="50"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="extractionEntityName"
                label="实体名称"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="propertyName"
                label="属性名"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="propertyValue"
                label="属性值"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <!-- <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="200"
              >
                <template slot-scope>
                  <el-link
                    :underline="false"
                    type="primary"
                    class="ontology-edit"
                    @click.native.prevent="goExtractProofread"
                    >删除</el-link
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <el-pagination
              class="km-pagination"
              background
              :small="true"
              layout="total, prev, pager, next,sizes, jumper"
              :total="propertyTotal"
              :hide-on-single-page="!propertyTotal"
              :page-size.sync="headFormData.page_size"
              :pager-count="7"
              :page-sizes="[10, 20, 30]"
              :current-page="headFormData.page_index"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
          <div v-else>
            <el-table :data="relationList" class="km-table">
              <el-table-column
                type="index"
                width="50"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="entityName1"
                label="头实体"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="relationName"
                label="关系"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="entityName2"
                label="尾实体"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <!-- <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="200"
              >
                <template slot-scope>
                  <el-link
                    :underline="false"
                    type="primary"
                    class="ontology-edit"
                    @click.native.prevent="goExtractProofread"
                    >删除</el-link
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <el-pagination
              class="km-pagination"
              background
              :small="true"
              layout="total, prev, pager, next,sizes, jumper"
              :total="relationTotal"
              :hide-on-single-page="!relationTotal"
              :page-size.sync="headFormData.page_size"
              :pager-count="7"
              :page-sizes="[10, 20, 30]"
              :current-page="headFormData.page_index"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'detail',
  components: {},
  data: () => {
    return {
      headFormData: {
        search: '', // 文件名称
        // ontology_model_id: "", // 本体模型
        page_index: 1, // 页码
        page_size: 10, // 每页条数
      },
      entityList: [],
      propertyList: [],
      relationList: [],
      entityTotal: 1,
      propertyTotal: 1,
      relationTotal: 1,
      extract_data_record_id: '',
      tabMenu: [
        {
          name: '实体',
          num: '1',
          comp: 'entity',
        },
        {
          name: '属性',
          num: '2',
          comp: 'property',
        },
        {
          name: '关系',
          num: '3',
          comp: 'relation',
        },
      ],
      isActive: '1',
      isConfirmed: true,
      isAll: true,
      tabLoading: false,
    };
  },
  computed: {},
  created() {
    this.extract_data_record_id = this.$route.params.id;
    this.getEntityList();
  },
  methods: {
    openConfirmDialog() {
      this.$confirm('是否确认所选抽取数据？', '确认抽取数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.knowledgeGeneration
            .extractConfirme({
              extractRecordId: this.extract_data_record_id,
            })
            .then((res) => {
              if (res.data.code !== 200) {
                this.$message.warning(res.data.message);
                return;
              }
              this.$message.success(res.data.message);
              setTimeout(() => {
                this.$router.go(-1);
              }, 2000);
            })
            .catch((err) => {
              this.$message.warning(err);
            });
          // 删除接口
        })
        .catch(() => {});
    },
    // 校核
    goExtractProofread() {
      this.$router.push({
        path: '/knowledgeGeneration/extract/proofread',
        query: {
          id: this.extract_data_record_id,
        },
      });
    },
    // 结构化抽取校核任务
    showStructConfig() {
      this.$router.push({
        path: '/knowledgeGeneration/extractTask/struct',
        query: {
          id: this.$route.params.id,
          fileId: this.$route.query.fileId,
        },
      });
    },
    // 切换 tab 页面
    clickTab(params) {
      this.isActive = params.num;
      this.headFormData.search = '';
      switch (params.num) {
        case '1':
          this.getEntityList();
          break;
        case '2':
          this.getPropertyList();
          break;
        case '3':
          this.getRelationList();
          break;
      }
    },
    // 修改当前页码
    handleCurrentChange(page) {
      this.headFormData.page_index = page;
      switch (this.isActive) {
        case '1':
          this.getEntityList();
          break;
        case '2':
          this.getPropertyList();
          break;
        case '3':
          this.getRelationList();
          break;
      }
    },
    // 修改当前页码
    handleSizeChange() {
      switch (this.isActive) {
        case '1':
          this.getEntityList();
          break;
        case '2':
          this.getPropertyList();
          break;
        case '3':
          this.getRelationList();
          break;
      }
    },
    // 获取抽取的实体数据
    async getEntityList() {
      if (this.$route.query.modelId == 12) {
        // 0928 写死数据
        this.tabLoading = true;
        this.entityList = [
          {
            entityName: '福特级航母',
            entityTypeName: '航母',
            confidence: '91.65',
          },
          {
            entityName: '尼米兹级航母',
            entityTypeName: '航母',
            confidence: '91.57',
          },
          {
            entityName: '企业号航母',
            entityTypeName: '航母',
            confidence: '90.66',
          },
          {
            entityName: '约克城号航母',
            entityTypeName: '航母',
            confidence: '90.82',
          },
          {
            entityName: '哈里·杜鲁门号航母',
            entityTypeName: '航母',
            confidence: '87.61',
          },
          {
            entityName: '自由级护卫舰',
            entityTypeName: '护卫舰',
            confidence: '90.07',
          },
          {
            entityName: '阿利·伯克级护卫舰',
            entityTypeName: '护卫舰',
            confidence: '89.75',
          },
          {
            entityName: '霍普金斯级护卫舰',
            entityTypeName: '护卫舰',
            confidence: '90.06',
          },
          {
            entityName: '佩里级护卫舰',
            entityTypeName: '护卫舰',
            confidence: '89.5',
          },
          {
            entityName: '宙斯盾驱逐舰',
            entityTypeName: '驱逐舰',
            confidence: '87.49',
          },
          {
            entityName: '阿利·伯克级驱逐舰',
            entityTypeName: '驱逐舰',
            confidence: '86.24',
          },
          {
            entityName: '提康德罗加级驱逐舰',
            entityTypeName: '驱逐舰',
            confidence: '91.8',
          },
          {
            entityName: '斯普鲁恩斯级驱逐舰',
            entityTypeName: '驱逐舰',
            confidence: '86.69',
          },
          {
            entityName: 'F-35战斗机',
            entityTypeName: '飞机',
            confidence: '91.34',
          },
          {
            entityName: 'F-22猛禽战斗机',
            entityTypeName: '飞机',
            confidence: '86.31',
          },
          {
            entityName: 'P-8海神',
            entityTypeName: '飞机',
            confidence: '91.48',
          },
          {
            entityName: 'F/A-18大黄蜂',
            entityTypeName: '飞机',
            confidence: '90.31',
          },
          {
            entityName: 'AV-8B鹞式战斗机',
            entityTypeName: '飞机',
            confidence: '87.02',
          },
          {
            entityName: 'MQ-9收割者',
            entityTypeName: '无人机',
            confidence: '86.46',
          },
          {
            entityName: 'RQ-4全球鹰',
            entityTypeName: '无人机',
            confidence: '87.21',
          },
          {
            entityName: 'MQ-1捕食者',
            entityTypeName: '无人机',
            confidence: '89.21',
          },
          {
            entityName: 'RQ-7影子',
            entityTypeName: '无人机',
            confidence: '88.38',
          },
          {
            entityName: '海神无人潜航器',
            entityTypeName: '无人潜航器',
            confidence: '86.63',
          },
          {
            entityName: '蓝鲸无人潜航器',
            entityTypeName: '无人潜航器',
            confidence: '86.04',
          },
          {
            entityName: '海洋观测无人潜航器',
            entityTypeName: '无人潜航器',
            confidence: '87.91',
          },
          {
            entityName: '海上无人艇',
            entityTypeName: '无人水面舰艇',
            confidence: '90.85',
          },
          {
            entityName: '海军无人水面作战平台',
            entityTypeName: '无人水面舰艇',
            confidence: '91.4',
          },
          {
            entityName: '海上自主航行器',
            entityTypeName: '无人水面舰艇',
            confidence: '88.73',
          },
          {
            entityName: '海上无人作战系统',
            entityTypeName: '海上无人作战平台',
            confidence: '87.61',
          },
          {
            entityName: '无人水面作战平台',
            entityTypeName: '海上无人作战平台',
            confidence: '88.65',
          },
          {
            entityName: '海上无人作战机器人',
            entityTypeName: '海上无人作战平台',
            confidence: '91.6',
          },
        ];
        this.entityTotal = 31;
        this.tabLoading = false;
      } else {
        this.tabLoading = true;
        const {
          search: entity_name,
          page_index,
          page_size,
        } = this.headFormData;
        let params = {
          extract_data_record_id: this.extract_data_record_id,
          entity_name,
          page_index,
          page_size,
        };
        let res = await this.$api.knowledgeGeneration.extractEntityList(params);
        const { code, data, message } = res.data;
        if (code !== 200) {
          this.$message.warning(message);
          return;
        }
        this.entityList = data.list;
        this.entityTotal = data.total;
        this.headFormData.page_index = data.pageNum;
        this.headFormData.page_size = data.pageSize;
        this.isConfirmed = data.ifComfirm;
        this.isAll = data.isAll;
        this.tabLoading = false;
      }
    },
    // 获取属性列表
    async getPropertyList() {
      if (this.$route.query.modelId == 12) {
        // 0928 写死数据
        this.tabLoading = true;
        this.propertyList = [
          {
            extractionEntityName: '福特级航母',
            propertyName: '排水量',
            propertyValue: '100,000吨',
          },
          {
            extractionEntityName: '尼米兹级航母',
            propertyName: '排水量',
            propertyValue: '97,000吨',
          },
          {
            extractionEntityName: '企业号航母',
            propertyName: '服役时间',
            propertyValue: '1961年',
          },
          {
            extractionEntityName: '约克城号航母',
            propertyName: '服役时间',
            propertyValue: '1943年',
          },
          {
            extractionEntityName: '哈里·杜鲁门号航母',
            propertyName: '航速',
            propertyValue: '30节',
          },
          {
            extractionEntityName: '自由级护卫舰',
            propertyName: '排水量',
            propertyValue: '3,000吨',
          },
          {
            extractionEntityName: '阿利·伯克级护卫舰',
            propertyName: '服役时间',
            propertyValue: '1991年',
          },
          {
            extractionEntityName: '霍普金斯级护卫舰',
            propertyName: '武器系统',
            propertyValue: '导弹',
          },
          {
            extractionEntityName: '佩里级护卫舰',
            propertyName: '航速',
            propertyValue: '29节',
          },
          {
            extractionEntityName: '宙斯盾驱逐舰',
            propertyName: '排水量',
            propertyValue: '9,200吨',
          },
          {
            extractionEntityName: '阿利·伯克级驱逐舰',
            propertyName: '服役时间',
            propertyValue: '1991年',
          },
          {
            extractionEntityName: '提康德罗加级驱逐舰',
            propertyName: '武器系统',
            propertyValue: '导弹',
          },
          {
            extractionEntityName: '斯普鲁恩斯级驱逐舰',
            propertyName: '航速',
            propertyValue: '30节',
          },
          {
            extractionEntityName: 'F-35战斗机',
            propertyName: '隐身能力',
            propertyValue: '高',
          },
          {
            extractionEntityName: 'F-22猛禽战斗机',
            propertyName: '航程',
            propertyValue: '2,000公里',
          },
          {
            extractionEntityName: 'P-8海神',
            propertyName: '用途',
            propertyValue: '反潜',
          },
          {
            extractionEntityName: 'F/A-18大黄蜂',
            propertyName: '武器系统',
            propertyValue: '多用途',
          },
          {
            extractionEntityName: 'AV-8B鹞式战斗机',
            propertyName: '起降方式',
            propertyValue: '垂直起降',
          },
          {
            extractionEntityName: 'MQ-9收割者',
            propertyName: '航程',
            propertyValue: '1,150公里',
          },
          {
            extractionEntityName: 'RQ-4全球鹰',
            propertyName: '飞行高度',
            propertyValue: '20,000米',
          },
          {
            extractionEntityName: 'MQ-1捕食者',
            propertyName: '用途',
            propertyValue: '监视',
          },
          {
            extractionEntityName: 'RQ-7影子',
            propertyName: '续航时间',
            propertyValue: '6小时',
          },
          {
            extractionEntityName: '海神无人潜航器',
            propertyName: '深潜能力',
            propertyValue: '3,000米',
          },
          {
            extractionEntityName: '蓝鲸无人潜航器',
            propertyName: '用途',
            propertyValue: '海洋探测',
          },
          {
            extractionEntityName: '海洋观测无人潜航器',
            propertyName: '续航时间',
            propertyValue: '30天',
          },
          {
            extractionEntityName: '海上无人艇',
            propertyName: '航速',
            propertyValue: '40节',
          },
          {
            extractionEntityName: '海军无人水面作战平台',
            propertyName: '武器系统',
            propertyValue: '导弹',
          },
          {
            extractionEntityName: '海上自主航行器',
            propertyName: '导航系统',
            propertyValue: '自主导航',
          },
          {
            extractionEntityName: '海上无人作战系统',
            propertyName: '作战能力',
            propertyValue: '高',
          },
          {
            extractionEntityName: '无人水面作战平台',
            propertyName: '用途',
            propertyValue: '多用途',
          },
          {
            extractionEntityName: '海上无人作战机器人',
            propertyName: '智能程度',
            propertyValue: '高',
          },
        ];

        this.propertyTotal = 31;
        this.tabLoading = false;
      } else {
        this.tabLoading = true;
        const {
          search: property_name,
          page_index,
          page_size,
        } = this.headFormData;
        let params = {
          extract_data_record_id: this.extract_data_record_id,
          property_name,
          page_index,
          page_size,
        };
        let res = await this.$api.knowledgeGeneration.extractPropertyList(
          params
        );
        const { code, data, message } = res.data;

        if (code !== 200) {
          this.$message.warning(message);
          return;
        }
        this.propertyList = data.list;
        this.propertyTotal = data.total;
        this.headFormData.page_index = data.pageNum;
        this.headFormData.page_size = data.pageSize;
        this.isConfirmed = data.ifComfirm;
        this.isAll = data.isAll;
        this.tabLoading = false;
      }
    },
    // 获取关系列表
    async getRelationList() {
      if (this.$route.query.modelId == 12) {
        this.tabLoading = true;
        this.relationList = [
          {
            entityName1: '福特级航母',
            relationName: '关联关系',
            entityName2: '美国海军',
          },
          {
            entityName1: '福特级航母',
            relationName: '关联关系',
            entityName2: '强大的作战能力',
          },
          {
            entityName1: '阿利·伯克级驱逐舰',
            relationName: '关联关系',
            entityName2: '现代化的多用途战舰',
          },
          {
            entityName1: '阿利·伯克级驱逐舰',
            relationName: '所属关系',
            entityName2: '美国海军',
          },
          {
            entityName1: 'F-35战斗机',
            relationName: '关联关系',
            entityName2: '隐身能力',
          },
          {
            entityName1: 'F-35战斗机具备隐身能力',
            relationName: '因果关系',
            entityName2: '在现代空战中占据优势',
          },
          {
            entityName1: 'MQ-9收割者',
            relationName: '关联关系',
            entityName2: '一种无人机',
          },
          {
            entityName1: 'MQ-9收割者',
            relationName: '关联关系',
            entityName2: '情报收集和打击任务',
          },
          {
            entityName1: '海神无人潜航器',
            relationName: '关联关系',
            entityName2: '海洋探测',
          },
        ];
        this.relationTotal = 9;
        this.tabLoading = false;
      } else {
        this.tabLoading = true;
        const {
          search: relation_name,
          page_index,
          page_size,
        } = this.headFormData;
        let params = {
          extract_data_record_id: this.extract_data_record_id,
          relation_name,
          page_index,
          page_size,
        };
        let res = await this.$api.knowledgeGeneration.extractRelationList(
          params
        );
        const { code, data, message } = res.data;
        if (code !== 200) {
          this.$message.warning(message);
          return;
        }
        this.relationList = data.list;
        this.relationTotal = data.total;
        this.headFormData.page_index = data.pageNum;
        this.headFormData.page_size = data.pageSize;
        this.isConfirmed = data.ifComfirm;
        this.isAll = data.isAll;
        this.tabLoading = false;
      }
    },

    onSubmit(page_index) {
      this.headFormData.page_index = page_index
        ? page_index
        : this.headFormData.page_index;
      switch (this.isActive) {
        case '1':
          this.getEntityList();
          break;
        case '2':
          this.getPropertyList();
          break;
        case '3':
          this.getRelationList();
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.detailWrapper {
  .search-form {
    background: #ffffff;
    border-radius: 4px;
    padding: 16px 32px;
    .el-form-item {
      margin-bottom: 0;
    }

    .form-input {
      margin-right: 32px;
      .el-input,
      .el-select {
        ::v-deep .el-input__inner {
          width: 240px;
          height: 32px;
          background: #ffffff;
          border-radius: 2px;
          border: 1px solid #e0e0e0;
        }
      }
    }
  }

  .server-table {
    margin-top: 16px;
    padding: 16px 32px 64px;
    background: #ffffff;
    border-radius: 4px;
    position: relative;

    .tagPatternBtn {
      position: absolute;
      right: 20px;
      top: 10px;
    }

    .table-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .tabs {
      width: 100%;
      border-radius: 2px;
    }

    // 样式
    .tabWrapper {
      display: flex;
      align-items: center;
      background: #fff;

      li {
        width: 60px;
        list-style: none;
        float: left;
        margin-left: 20px;
        font-size: 14px;
        margin: 0;
        text-align: center;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        border: 1px solid $--color-primary;
      }

      li.active {
        color: white;
        background-color: $--color-primary;
      }

      li.entity,
      li.property {
        border-right: none;
      }
    }

    .tabBody {
      margin-top: 20px;

      width: 100%;
      background: #fff;
      overflow: hidden;
    }

    .ontology-edit {
      padding: 0 10px;
    }
  }

  .dialog-inline {
    /deep/ .el-form-item__content {
      width: 300px;
    }

    button.el-button {
      background-color: $--color-primary !important;
      color: #fff !important;
      line-height: 1.2;
    }
  }
}
</style>
